import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaNewScroll } from 'ecCom';

import IntroStep1 from './portalintro/IntroStep1';

@inject('portalThemeStore')
@observer
class E9TopMenu extends React.Component {
  constructor(props) {
    super(props);
    this.onVisibleChange = this.onVisibleChange.bind(this);
    this.onTopMenuClick = this.onTopMenuClick.bind(this);
  }

  render() {
    const { portalThemeStore } = this.props;
    const { themeInfo = {}, topMenuObj = {}, topMenuVisible, translatepage } = portalThemeStore;

    const { themeData = {} } = themeInfo;
    const { styleConfig = {} } = themeData;
    const { topmenu = {} } = styleConfig;
    const { style: topmenustyle, showCount = 6 } = topmenu;

    const { topMenu = [], topMenuSelected = {} } = topMenuObj;
    const _topMenu = toJS(topMenu);
    const _topMenuSelected = toJS(topMenuSelected);
    const { id: selectedId } = _topMenuSelected;

    if (topmenustyle == 'text') {
      return (
        <div className={`e9header-top-menu2 ${topMenuVisible ? 'e9header-top-menu2-open' : ''}`} onMouseLeave={() => this.onVisibleChange(false)}>
          <div className="e9header-top-menu2-content" style={{ maxWidth: showCount * 60 + 56 }}>
            {topMenuVisible ? (
              <WeaNewScroll ecId={`${(this && this.props && this.props.ecId) || ''}_WeaNewScroll@ofz6wt`} height="100%">
                <div className="e9header-top-menu2-items" style={{ maxWidth: showCount * 60 + 1, maxHeight: $(document.body).height() - 10 }}>
                  {_topMenu.map((item, index) => {
                    const { id, name, fname } = item;
                    const selected = id == selectedId;

                    return (
                      <div
                        key={index}
                        data-id={id}
                        className={`e9header-top-menu2-item ${selected ? 'e9header-top-menu2-item-selected' : ''}`}
                        title={translatepage == '1' ? item.fname : item.name}
                        onClick={() => this.onTopMenuClick(item)}
                      >
                        {translatepage == '1' ? fname : name}
                      </div>
                    );
                  })}
                  <div style={{ clear: 'both' }} />
                </div>
                {topMenu.length > showCount && (
                  <div className="e9header-top-menu2-btn" onClick={() => this.onVisibleChange(!topMenuVisible)}>
                    <i className="icon-coms-List" />
                  </div>
                )}
                <div style={{ clear: 'both' }} />
              </WeaNewScroll>
            ) : (
              <div>
                <div className="e9header-top-menu2-items" style={{ maxWidth: showCount * 60 + 1 }}>
                  {_topMenu.map((item, index) => {
                    const { id, name, fname } = item;
                    const selected = id == selectedId;

                    return (
                      <div
                        key={index}
                        data-id={id}
                        className={`e9header-top-menu2-item ${selected ? 'e9header-top-menu2-item-selected' : ''}`}
                        title={translatepage == '1' ? item.fname : item.name}
                        onClick={() => this.onTopMenuClick(item)}
                      >
                        {translatepage == '1' ? fname : name}
                      </div>
                    );
                  })}
                  <div style={{ clear: 'both' }} />
                </div>
                {topMenu.length > showCount && (
                  <div className="e9header-top-menu2-btn" onClick={() => this.onVisibleChange(!topMenuVisible)}>
                    <i className="icon-coms-List" />
                  </div>
                )}
                <div style={{ clear: 'both' }} />
              </div>
            )}
          </div>
        </div>
      );
    }

    return (
      <div className="e9header-top-menu">
        <IntroStep1 ecId={`${(this && this.props && this.props.ecId) || ''}_IntroStep1@jylky3`} />
      </div>
    );
  }

  onVisibleChange(visible) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onTopMenuVisibleChange(visible);
  }

  onTopMenuClick(topMenuSelected) {
    this.onVisibleChange(false);

    const { portalThemeStore } = this.props;
    portalThemeStore.onTopMenuSelectedChange(topMenuSelected);
  }
}

export default E9TopMenu;
